import React from "./react";
import ReactDOM from "./react-dom/client";
/* 

在浏览器绘制之前，读取或修改 DOM，你应该使用 useLayoutEffect。这通常用于读取例如布局或尺寸等与视觉相关的属性。
如果你不关心绘制，而只是需要在某些事情发生后执行一些代码，使用 useEffect 更为合适。

*/
function Animation() {
  const ref = React.useRef(); //{current:null}
  React.useLayoutEffect(() => {
    ref.current.style.transform = `translate(500px)`;
    ref.current.style.transition = `all 500ms`;
    while (true) {}
  }, []);
  const styleObj = {
    width: "100px",
    height: "100px",
    borderRadius: "50%",
    backgroundColor: "red",
  };
  return <div style={styleObj} ref={ref}></div>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Animation />);
